<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        传统的网页提交数据的方式 依赖于表单
        action="url"  数据提交的地址(相对路径->传给其他页面,后端接口(后端提供对接数据的地址))
        method="get/post" 数据提交的方式

        get提交:  以get方式提交数据,会将参数数据队列(a=1&b=2&c=3),提交到action所指的地址栏,用?分隔
        post提交: 以post提交的数据,会将参数数据队列存放在请求主体中,在header中携带,地址栏不可见


        问题: 表单提交数据往往伴随着页面跳转 -> 用户体验不好 -> 有没有什么方式可以在不跳转的同时将数据传过去(后端),把服务器(后端)响应的内容拿回来  => ajax

        什么是Ajax？
        ajax(Asynchronous Javascript And XML（异步JavaScript和XML）)
        是指一种创建交互式网页应用的网页开发技术。

        - AJAX：Asynchronous Javascript And XML（异步JavaScript和XML）
        - 交互：这里的交互指客户端和服务器的数据是可以相互传递和使用的。
        - XML：一种类似于HTML的标记语言，可以将数据结构化，XML已经被JSON淘汰了。
        - 异步：异步指程序可以同时执行，同步指程序需要按照顺序执行。

        特点:
            让当前页面，不跳转的同时把数据传递过去，把服务器(后端)响应的内容拿回来。
            在不提交整个页面的情况下,实现页面的局部刷新;

        注意:  
            ajax需要依赖于服务器环境  -> 学习ajax的时候,需要请求服务器  (测试时需要使用live Server打开-> 本地服务, 或者可以请求别人的服务器)

     -->
    <form action="https://www.baidu.com" method="GET">
        <div class="input-group">
            <label>用户名:</label>
            <input type="text" name="user">
        </div>
        <div class="input-group">
            <label>密&emsp;码:</label>
            <input type="text" name="pwd">
        </div>
        <div class="input-group">
            <label>手机号:</label>
            <input type="text" name="phone">
        </div>
        <div class="input-group">
            <label>邮&emsp;箱:</label>
            <input type="text" name="email">
        </div>
        <div class="input-group">
            <input type="submit" value="提交">
        </div>
    </form>
</body>

</html>